<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>分析生命周期</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
<!-- 准备好 一个容器-->
<div id="root" :x="n">
   <h2>当前的n值是：{{n}}</h2>
  <button @click="add">点我n+1</button>
    <button @click="destroy">点我毁灭</button>
</div>

</body>


<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  const vm = new Vue({
    el:'#root',
    // template:'<div>' +
    //     '   <h2>当前的n值是：{{n}}</h2>\n' +
    //     '  <button @click="add">点我n+1</button></div>',
    data:{
      n:1
    },
    methods:{
      add(){

        this.n++
      },
      destroy(){
          this.$destroy()
      }
    },
    beforeCreate(){
      console.log('beforeCreate')
    },
    created(){
      console.log('created')
    },
    beforeMount(){
      console.log('beforeMount')
    },
    mounted(){
      console.log('mounted')
    },
    beforeUpdate(){
        console.log('beforeUpdate')
    },
    updated(){
        console.log('updated')
    },
    beforeDestroy(){
        console.log('beforeDestroy')
        this.add()
        console.log(this.n)
    },
    destroyed(){
        console.log('destroyed')
    }
  })

</script>

</html>
